<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Style focus-within</title>
  <style>
    body .ally-focus-within {
      outline: 1px solid blue;
    }
    body :focus {
      outline: 1px solid red;
    }
  </style>
</head>
<body>
  <h1>Style focus-within</h1>

  <input id="before">

  <div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" focusable="false">
      <a xlink:href="#void" id="svg-link">
        <text x="10" y="20" id="svg-link-text">text</text>
      </a>
    </svg>

    <input id="after">
  </div>

  <script src="../../node_modules/requirejs/require.js"></script>
  <script>
    require.config({
      paths: {
        ally: '../../dist/amd',
        // shims required by ally.js
        'css.escape': '../../node_modules/css.escape/css.escape',
        'platform': '../../node_modules/platform/platform'
      }
    });

    require([
      'ally/util/platform',
      'ally/style/focus-within',
    ], function(platform, styleFocusWithin) {
      window._platform = platform;

      styleFocusWithin();
    });
  </script>
</body>
</html>
